import React, {useEffect, useState} from "react";
import NestCmpt from "../units/NestCmpt.tsx";
import {CardInfo} from "../../domain";
import {FloatButton, List, Segmented, Space} from "antd";
import {FireOutlined} from '@ant-design/icons';
import style from "./NestPage.module.css"
import {post} from "../../utils/http";

const NestPage: React.FC = () => {

    const [data, setData] = useState<CardInfo[]>([])
    const [open, setOpen] = useState(true);

    useEffect(() => {
        //获取初始化数据
        fetchData()
    }, []);


    const fetchData = async () => {
        const response = await post("/system/catnest/list", {});
        console.log(response.data.data)
        const listData = response.data.data;
        const list = listData.map((p: { nestName: string; nestDesc: string; loackStatus: boolean; }) => {
            return new CardInfo(p.nestName, p.nestDesc, 'yiwyn', p.loackStatus);
        })
        setData(list)
    }

    const onClickRecord = () => {
        setOpen(!open);
    };

    return (
        <>
            <Space direction="vertical" style={{margin: "1rem"}}>
                <Segmented options={['OPEN', 'CLOSE', 'LOCK', 'UNLOCK']}/>
                <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']}/>
            </Space>

            <Space style={{margin: "1rem"}}>
                <List
                    grid={{
                        gutter: 16,
                        xs: 1,
                        sm: 2,
                        md: 4,
                        lg: 5,
                        xl: 5,
                        xxl: 5,
                    }}
                    dataSource={data}
                    renderItem={(item) => (
                        <List.Item>
                            <NestCmpt cardInfo={item}/>
                        </List.Item>
                    )}
                />
            </Space>


            <FloatButton.Group
                open={open}
                onClick={onClickRecord}
                trigger="click"
                style={{right: 24}}
                icon={<FireOutlined/>}
            >
                <div className={style.globalBox}>
                    <div className={style.globalInfo}>创建了一个猫窝 ， 去看看吧
                        ～！
                    </div>

                    <div className={style.globalInfo}>创建了一个猫窝 ， 去看看吧
                        ～！
                    </div>
                    <div className={style.globalInfo}>创建了一个猫窝 ， 去看看吧
                        ～！
                    </div>
                    <div className={style.globalInfo}>创建了一个猫窝 ， 去看看吧
                        ～！
                    </div>
                </div>
            </FloatButton.Group>
        </>
    )
}

export default NestPage